<!DOCTYPE html>
<html lang="en">
<head>
    <!-- meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>专家研讨会</title>
    <link rel="stylesheet" href="<?php echo base_url('static/bootstrap-4.0.0/css/bootstrap.min.css?v=' . $version); ?>">
    <style>
        body {
            background: #272b30;
            width: 3008px;
            height: 928px;
            /*background-image: url("http://xinshan.oss-cn-beijing.aliyuncs.com/header2.png");*/
            background-repeat: no-repeat;
        }
        .container-fluid {
            background: url(static/title.png) center top no-repeat #272b30;
        }
        .bg-transparent {
            background: transparent;
            border: none;
            margin-top: 30px;
        }

        .box-shadow{
           box-shadow:  0px 0px 15px rgba(0, 0, 0, 0.07);
            margin: 10px;
        }

        .card-title {
            color: #c5c2c2;
        }
        .list-group-item { 
            background-color: transparent; 
        }

        .middleHeader{
            height: 400px;
            text-align: center;
        }
        /*总访问量边框*/
        .allvisit{
            /*color:#ffd37d;*/
            margin: 15% 20% 5% 23%;
            width: 700px;
            height: 100px;
            border: 1px solid #626262;
            position: relative;
        }
        /*总访问量*/
       .visit{
           position: absolute;
           width: 150px;
           color:#ffd37d;
           left:275px;
           top:-18px;
           background-color:#272b30;
           /*font-family: SimHei ;*/
       }
       /*总访问量数字*/
        .num{
            width: 550px;
            height: 70px;
            position: absolute;
            background-color: #272b30;
            left: 75px;
            top: 50px;

        }
        .num>span{
            display: inline-block;
            background-color: #32373d;
            width: 62px;
            height: 70px;
            border: 1px solid #626262;
            font-size: 50px;
            line-height: 66px;
            text-align: center;
            vertical-align: middle;
        }
        .num span:nth-child(3){
            margin-left: 7px;
        }
        .num span:nth-child(6){
            margin-left: 7px;
        }
        .talkMap{
            position: relative;
        }
        /*当前全国模块*/
        .middle{
            margin-top: 40px;
        }
        /*全国评分分布*/
        h3{
            position: absolute;
            width: 32px;
            color: #ffd37d;
            left: 8%;
            top: 6%;
        }
        h2 ,.talk ,h4 ,h5{
            color:#ffd37d;
            /*font-family: SimHei ;*/
        }

        span{
            color: white;
            /*font-family: SimHei;*/
        }
        /*主办单位*/

        .hostTop{
            margin-top: 138px;
        }

        /*协办单位*/
        .rightJoin{
            margin: 15px 0px 10px 0px ;
        }
        /*主办方*/
        .host {
            height: 60px;
            border: 1px solid #626262 ;
            border-radius: 5px;
            line-height: 20px;
            text-align: center;
        }
        /*单位字间距*/
        .hostMiddle{
            padding: 0 120px;
        }
        .join{
            margin-top: -4px;
            height: 60px;
            border: 1px solid #626262 ;
            border-radius: 5px;
            line-height: 20px;
            text-align: center;
            margin-bottom: 37px;
        }
        /*当前评论数量*/
        .talk{
            margin: 90px 0 10px 50px;
        }
        .takeNum{
            margin-bottom: 25px;
        }
        /*当前观看人数*/
        .seePeople{
            margin:20px 0px 10px 50px ;
        }
        /*全国观看分布图*/
        .country{
            font-size: 30px;
            margin: 15px 0px 0px 30px;
        }
        /*最热评论,红包*/
        .hotTalk ,.money{
            color:#ffd37d;
            margin:20px 0px 0px 23px ;
        }
        .redpack-list{
            margin-left: -8px;
        }
        .redpack-list li{
            border-style: none;
        }
        /*评论块*/
        .talker{
            background-color: #32373d;
            margin: 4px;
            color:#b3c1db;
            /*display: block;*/
            padding-top: 7px;
            padding-bottom: 7px;
        }
        .talkSize{
            font-size: 15px;
        }
        /*红包字体*/
       .redPackage{
            font-size: 10px;
       }
       /*抽中红包字体*/
        .take{
            color:#b3c1db ;
        }
        /*地址*/
        .site{
            color:#626b76;
        }
        .talkName{
            color: #464fe2;
            font-size: 14px;
        }
        .redName{
            color: #464fe2;
            font-size: 10px;
        }
        .moneyColor{
            color:#f6593f ;
        }


    </style>
</head>
<body>
    
    <div class="container-fluid">
        <div class="row">
            <!-- 评论图标区域 --> 
            <div class="col-md-3">
                <h2 class="card-title text-md-left talk ">当前评论数量：<span class="comment-line-amount">10</h2>
                <div class="card bg-transparent comment-line box-shadow takeNum">
                    <!--<h3 class="card-title text-md-left talk ">当前评论数量：<span class="comment-line-amount">10</h3>-->
                    <div class="card-block comment-line-charts" style="width: 100%; height: 385px;"></div>
                </div>

                <div class="card bg-transparent talkMap box-shadow">
                    <h3 class="talkImage">全国评论分布图</h3>
                    <div class="card-block comment-map-charts" style="width: 100%; height: 385px;"></div>
                </div>
            </div>

            <!-- 观看人数区域 -->
            <div class="col-md-6">
                <div class="row">
                    <div class="col-md-12 middleHeader">
                        <div class="card bg-transparent pv-line allvisit">
                            <h2 class="card-title text-md-center ">
                               <span class="visit">总访问量</span>
                                <!--<span class="pv-line-amount">40</span>-->
                            </h2>
                            <div class="num">
                                <span>0</span>
                                <span>0</span>
                                <span>2</span>
                                <span>3</span>
                                <span>4</span>
                                <span>5</span>
                                <span>6</span>
                                <span>7</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row middle bg-transparent  box-shadow">
                    <div class="col-md-6 ">

                        <div class="card bg-transparent">
                            <h2 class="seePeople " >
                                当前观看人数：<span class="pv-line-amount">40</span>
                            </h2>
                            <div class="card-block pv-line-charts" style="width: 100%; height: 380px;"></div>
                        </div>
                    </div>
 
                    <div class="col-md-6">
                        <div class="card bg-transparent">
                            <h4 class="country">全国观看分布图</h4>
                            <div class="card-block test-map-charts" style="width: 100%; height: 400px;"></div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 右侧 评论 红包 区域 -->
            <div class="col-md-3">
                <div class="row rightTop">
                    <div class="col-md-12">
                        <div class=" bg-transparent">
                            <div class=" text-md-right hostTop "><h5>主办单位</h5></div>
                            <div class="card-block text-white host ">
                               <span >中央党校党建部</span>
                                <span class="hostMiddle">民生智库</span>
                                <span >郑州市委组织部</span>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-12">
                        <div class=" bg-transparent rightJoin">
                            <div class=" text-md-right "><h5>协办单位</h5></div>
                            <div class="card-block text-white join">
                                <span >金水区委组织部</span>
                                <span class="hostMiddle">中外新闻社</span>
                                <span>河南鑫山党委</span>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6 comment-list">
                        <div class="card bg-transparent box-shadow">
                            <h6 class="card-title text-md-left hotTalk">最新热评</h6>
                            <div class="card-block" style="width: 100%; height: 510px; overflow: hidden;">
                                <ul class="list-group"></ul>
                            </div>
                        </div>
                    </div>


                    <div class="col-md-6 redpack-list">
                        <div class="card bg-transparent box-shadow">
                            <h6 class="card-title text-md-left money">红包发放实况</h6>
                            <div class="card-block" style="width: 100%; height: 510px; overflow: hidden;">
                                <ul class="list-group"></ul>
                            </div>
                        </div>
                    </div>
                </div>

            </div>

        </div>
    </div>

    <!-- jQuery first, then Tether, then Bootstrap JS. -->
    <script src="<?php echo base_url('static/jquery-3.2.0.js?v=' . $version); ?>"></script>
    <script src="<?php echo base_url('static/tether-1.4.0.min.js?v=' . $version); ?>"></script>
    <script src="<?php echo base_url('static/bootstrap-4.0.0/js/bootstrap.min.js?v=' . $version); ?>"></script>
    <script src="<?php echo base_url('static/echarts.js?v=' . $version); ?>"></script>
    <script src="<?php echo base_url('static/china.js?v=' . $version); ?>"></script>
    <script src="<?php echo base_url('static/geo_coord_map.js?v=' . $version); ?>"></script>
    <script src="<?php echo base_url('static/geo_coord_data.js?v=' . $version); ?>"></script>
    <script src="<?php echo base_url('static/analyze_charts.js?v=' . $version); ?>"></script>
</body>
</html>